<script setup>
import { ref, onMounted, nextTick } from 'vue'
import useVideoPlayer from '@/hooks/useVideoPlayer'
// 视频地址
const videoList = ref([
  {
    url: `https://www.videourl.com?token=Aasdfacg`, // 播放链接
    id: 1, // 视频id
    mode: import.meta.env.VITE_PLAYVIDEO_MANNER, //播放方式 hls/flv
  },
])
const { playVideo, destroyed } = useVideoPlayer()
// 播放视频
const initVideo = () => {
  nextTick(() => {
    destroyed()
    videoList.value.forEach((e) => {
      playVideo(e)
    })
  })
}
onMounted(() => {
  initVideo()
})
</script>

<template>
  <div class="grid grid-cols-2 grid-rows-2 h-full">
    <div v-for="(item, index) in videoList" :key="item.id" :id="item.id">
      {{ index }}
    </div>
  </div>
</template>

<style scoped lang="scss"></style>
